<template>
  <div style="background:#fff;padding-top:20px;padding-bottom:50px">
    <!-- introduction -->
    <div class="intro">
      <div class="userImg">
        <img src="../../assets/global/img/user.png" alt="" />
      </div>
      <div class="userInfo">
        <p>{{ username }}</p>
        <span>联系电话：{{ phone }}</span>
        <p class="address">地址：{{ address }}</p>
      </div>
      <!--金刚区  -->
      <div class="iconList">
        <div class="iconItem" @click="rentLink">
          <div class="iconPic">
            <img src="../../assets/global/icon/1.png" alt="" />
          </div>
          <span>已借出</span>
        </div>
        <div class="iconItem" @click="rentedLink">
          <div class="iconPic">
            <img src="../../assets/global/icon/2.png" alt="" />
          </div>
          <span>已借到</span>
        </div>
        <div class="iconItem" @click="recordLink">
          <div class="iconPic">
            <img src="../../assets/global/icon/3.png" alt="" />
          </div>
          <span>历史记录</span>
        </div>
      </div>
      <!--van-cell  -->
      <van-cell title="客服" icon="service" is-link @click="message">
      </van-cell>
      <van-cell title="消息" icon="bell" is-link to="/notice"></van-cell>
      <!-- <van-button round class="logout">退出登录</van-button> -->
      <van-row gutter="20">
        <van-col span="8"></van-col>
        <van-col span="8"> </van-col>
        <van-col span="8"></van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
const excuteBridge = () => {
  ZWJSBridge.onReady(() => {
    console.log("初始化完成后，执行bridge方法");
  });
};
// 埋点
// 单页应用 或 “单个页面”需异步补充 PV 日志参数还需进行如下埋点：
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["aplus-waiting", "MAN"],
});
// 单页应用路由切换后 或 在异步获取到 pv 日志所需的参数后再执行 sendPV：
aplus_queue.push({
  action: "aplus.sendPV",
  arguments: [
    { is_auto: false },
    {
      // 自定义 PV 参数 key-value 键值对（只能是这种平铺的 json，不能做多层 嵌套），如：
      miniAppId: "2001886320",
      miniAppName: "庆元县教育局—”爱阅之城“",
      long: "this.long",
      lati: "this.lati",
      userType: "",
    },
  ],
});
// 如采集用户信息是异步行为需要先执行这个 BLOCK 埋点
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_hold", "BLOCK"],
});
// 设置会员昵称
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_user_nick", "this.username"],
});
// 设置会员
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_user_id", "this.userid"],
});
aplus_queue.push({
  action: "aplus.setMetaInfo",
  arguments: ["_dev_id", "yourDeviceId"],
});

export default {
  data() {
    return {
      ticket: "",
      gettime: "",
      token: "",
      username: "",
      userid: "",
      address: "",
      phone: "",
      loginname: "",
      long: "",
      lati: "",
      userType: "",
      //
      usernameData: "",
      phoneData: "",
      addressData: "",
    };
  },
  methods: {
    // 跳转-已借出
    rentLink() {
      this.$router.push({
        path: "/rent",
      });
    },
    // 跳转-已借到
    rentedLink() {
      this.$router.push({
        path: "/rented",
      });
    },
    // 跳转-历史记录
    recordLink() {
      this.$router.push({
        path: "/record",
      });
    },
    // 电话消息弹框
    message() {
      Dialog.alert({
        title: "客服电话",
        message: "0571-88808880",
        theme: "round-button",
        confirmButtonColor: "#5a78ec",
      }).then(() => {
        // confirm
        this.getPhone();
      });
    },
    //拨打电话
    getPhone() {
      // window.location.href = "tel:0571-88808880";
      ZWJSBridge.phoneCall({
        corpId: "0571-88808880",
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取时分秒
    getCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      let hh =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.gettime = yy + "" + mm + "" + dd + "" + hh + "" + mf + "" + ss;
      // console.log("获取时间");
      // console.log(this.gettime);
      this.getTicket();
    },
    // 获取票据
    getTicket() {
      // 获取url参数
      let params = new URLSearchParams(
        window.location.href.split("?")[1].split("#")[0]
      );
      // console.log(params);
      this.ticket = params.get("ticket").split("#")[0];
      // console.log("ticket：" + params.get("ticket").split("#")[0]); // 获取地址栏参数
      this.getSt();
    },
    //票据认证
    // https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=方法名&
    // https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=ticketValidation&
    async getSt() {
      console.log("getSt准备工作.....");
      let sign = "ayzctctsgxxtayzctctsgxxtpwd" + this.gettime;
      // const res = await this.http
      //   .asomePost("", {
      const res = await this.mgopfn(
        "mgop.educational.system.ticketValidation",
        {
          method: "ticketValidation",
          servicecode: "ayzctctsgxxt",
          time: this.gettime,
          sign: this.$md5(sign),
          st: this.ticket,
          datatype: "json",
        }
      ).catch((err) => {
        console.log(err);
      });
      if (res.data.errmsg != "成功") {
        return;
      }
      console.log("getSt结束:");
      console.log(res);
      this.username = res.data.username;
      this.userid = res.data.userid;
      this.usernameData = res.data.username;

      window.localStorage.setItem("usernameData", this.username);
      console.log("username:" + this.username);
      console.log("userid:" + this.userid);
      this.usernameData = window.localStorage.getItem("usernameData");
      console.log("本地数据存储username：" + this.usernameData);
      this.token = res.data.token;
      this.getToken();
    },
    // 获取token
    async getToken() {
      console.log("getToken准备工作....:");
      let str = "ayzctctsgxxtayzctctsgxxtpwd" + this.gettime;
      // const res = await this.http.asomePost("", {
      const res = await this.mgopfn(
        "mgop.educational.system.ticketValidation",
        {
          method: "getUserInfo",
          servicecode: " ayzctctsgxxt",
          time: this.gettime,
          sign: this.$md5(str),
          token: this.token,
          datatype: "json",
        }
      ).catch((err) => {
        console.log(err);
      });
      if ((res.data.errmsg = "成功")) {
        console.log("getUserInfo:" + res);
        this.phone = res.data.mobile;
        this.address = res.data.homeaddress;
        window.localStorage.setItem("phoneData", this.phone);
        window.localStorage.setItem("addressData", this.address);
        // start
        this.$store.commit("getUdata", {
          phone: this.phone,
          address: this.address,
          username: this.username,
        });
        // end
        console.log("phone：" + this.phone);
        console.log("address:" + this.address);
        this.phoneData = window.localStorage.getItem("phoneData");
        this.addressData = window.localStorage.getItem("addressData");
        console.log("本地数据存储phone：" + this.phoneData);
        console.log("本地数据存储address：" + this.addressData);
      }
    },
  },

  // https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=getUserInfo&
  //login
  mounted() {
    this.usernameData = window.localStorage.getItem("usernameData");
    console.log("本地数据存储username：" + this.usernameData);

    console.log("localStorage.....");
    console.log(window.localStorage.getItem("usernameData"));

    console.log("vuex.....");
    console.log(this.$store.state.Custmer);

    this.username = window.localStorage.getItem("usernameData")
      ? window.localStorage.getItem("usernameData")
      : this.$store.state.Custmer.username;
    this.phone = window.localStorage.getItem("phone")
      ? window.localStorage.getItem("phone")
      : this.$store.state.Custmer.phone;
    this.address = window.localStorage.getItem("address")
      ? window.localStorage.getItem("address")
      : this.$store.state.Custmer.address;
    excuteBridge();

    // const USER_INFO = ['username','phone','address']
    // for(let val in USER_INFO){
    //   this[val] = window.localStorage.getItem(val)?window.localStorage.getItem(val):this.$store.state.Custmer[val]
    // }
  },

  created() {
    // this.getSt();
    // this.getTicket();
    this.getCurrentTime();
    // this.usernameData = this.$store.state.Custmer.username;
    // this.phoneData = this.$store.state.Custmer.phone;
    // this.addresssData = this.$store.state.Custmer.address;
  },
  watch: {
    items: {
      handler: function(items) {
        localStore.save(items);
      },
      deep: true,
    },
  },
  //这一步将items变化之后的值都存在了localStorage之中
};
</script>

<style scoped>
@media screen and (min-width: 320px) {
  .intro {
    width: 80%;
    height: 120px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 30px;
  }
  .userImg {
    width: 60px;
    height: 60px;
    background: #5a78ec;
    border-radius: 50px;
    position: relative;
    left: 20px;
    top: 20px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .userInfo {
    width: 140px;
    height: 80px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 40px;
    top: 20px;
    color: #fff;
    letter-spacing: 0.5px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 10px;
  }
  .address {
    font-size: 10px;
    width: 140px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: -20px;
    width: 100%;
    height: 35px;
    font-size: 12px;
    border-radius: 10px;
  }
  .iconList {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 80px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    text-align: center;
    padding-top: 50px;
  }

  .iconPic {
    width: 50px;
    height: 50px;
    /* background: chartreuse; */
    border-radius: 50px;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  .van-cell {
    margin-bottom: 20px;
  }
  .van-dialog {
    width: 90%;
  }
  .van-dialog__header {
    padding-top: 26px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
  }
  .van-dialog--round-button .van-dialog__message {
    padding-bottom: 16px;
    color: #323233;
  }
  .van-button__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
  }
  .bottom {
    font-size: 10px;
    position: relative;
    bottom: -35px;
  }
  .bottom p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 375px) {
  .intro {
    width: 80%;
    height: 150px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 20px;
  }
  .userImg {
    width: 80px;
    height: 80px;
    background: #5a78ec;
    border-radius: 50px;
    position: relative;
    left: 20px;
    top: 30px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .userInfo {
    width: 170px;
    height: 108px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 30px;
    top: 20px;
    color: #fff;
    letter-spacing: 0.5px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 13px;
  }
  .address {
    font-size: 13px;
    width: 170px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 25px;
    width: 100%;
    height: 35px;
    font-size: 12px;
    border-radius: 10px;
  }
  .iconList {
    margin-top: 20px;
    margin-bottom: 30px;
    width: 100%;
    height: 80px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    text-align: center;
    padding-top: 60px;
  }

  .iconPic {
    width: 50px;
    height: 50px;
    /* background: chartreuse; */
    border-radius: 50px;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  .van-dialog {
    width: 90%;
  }
  .van-dialog__header {
    padding-top: 26px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    font-size: 30px;
  }
  .van-dialog--round-button .van-dialog__message {
    padding-bottom: 16px;
    color: #323233;
  }
  .van-button__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
  }
  .bottom {
    font-size: 11px;
    position: relative;
    bottom: -90px;
  }
  .bottom p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 414px) {
  .intro {
    width: 80%;
    height: 170px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 20px;
  }
  .userImg {
    width: 100px;
    height: 100px;
    background: #5a78ec;
    border-radius: 50px;
    position: relative;
    left: 20px;
    top: 25px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .userInfo {
    width: 180px;
    height: 130px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 30px;
    top: 28px;
    color: #fff;
    font-size: 30px;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
    /* background: pink; */
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 14px;
  }
  .address {
    font-size: 14px;
    display: inline-block;
    width: 250px;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .iconList {
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
    height: 80px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    text-align: center;
  }

  .iconPic {
    width: 50px;
    height: 50px;
    /* background: chartreuse; */
    border-radius: 50px;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-button {
    width: 100%;
    margin-top: 50px;
  }
  .van-dialog {
    width: 90%;
  }
  .van-dialog__header {
    padding-top: 26px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
  }
  .van-dialog--round-button .van-dialog__message {
    padding-bottom: 16px;
    color: #323233;
  }
  .van-button__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
  }
  .bottom {
    font-size: 12px;
    position: relative;
    bottom: -100px;
  }
  .bottom p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) {
  /deep/.van-nav-bar {
    width: 100%;
    line-height: 22px;
    font-size: 26px;
  }
  /deep/.van-nav-bar__content {
    height: 80px !important;
  }
  /deep/.van-nav-bar__title {
    font-size: 26px !important;
  }
  .intro {
    width: 80%;
    height: 240px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 50px;
  }
  .userImg {
    width: 160px;
    height: 160px;
    background: #5a78ec;
    border-radius: 50px;
    position: relative;
    left: 30px;
    top: 30px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
  }
  .userInfo {
    width: 400px;
    height: 180px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 50px;
    top: 40px;
    color: #fff;
    font-size: 32px;
    letter-spacing: 0.5px;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 20px;
  }
  .address {
    font-size: 20px;
    width: 360px;
    height: 120px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 40px;
    width: 100%;
    height: 40px;
    font-size: 16px;
    border-radius: 10px;
  }
  .iconList {
    margin-top: 30px;
    padding-bottom: 20px;
    width: 100%;
    height: 100px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 22px;
    text-align: center;
    position: relative;
    top: 50px;
  }

  .iconPic {
    width: 80px;
    height: 80px;
    /* background: chartreuse; */
    border-radius: 50px;
    margin: 0 auto;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-cell {
    line-height: 80px;
    height: 80px;
    /* background: pink; */
    font-size: 22px;
    padding-top: 30px;
    padding-left: 40px;
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    height: 80px;
    font-size: 24px;
    line-height: 80px;
  }
  /deep/.van-button {
    width: 100%;
    height: 60px;
    font-size: 22px;
    margin-top: 50px;
  }
  .van-dialog {
    width: 90%;
  }
  .van-dialog__header {
    padding-top: 26px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
  }
  .van-dialog--round-button .van-dialog__message {
    padding-bottom: 16px;
    color: #323233;
  }
  .van-button__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
  }
  .bottom {
    font-size: 18px;
    margin-top: 50px;
    padding-bottom: 40px;
  }
  .bottom p {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  /deep/.van-nav-bar {
    width: 100%;
    line-height: 22px;
    font-size: 26px;
  }
  /deep/.van-nav-bar__content {
    height: 80px !important;
  }
  /deep/.van-nav-bar__title {
    font-size: 26px !important;
  }
  .intro {
    width: 80%;
    height: 300px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 50px;
  }
  .userImg {
    width: 180px;
    height: 180px;
    background: #5a78ec;
    border-radius: 100px;
    position: relative;
    left: 50px;
    top: 30px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
  }
  .userInfo {
    width: 400px;
    height: 200px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 100px;
    top: 40px;
    color: #fff;
    font-size: 38px;
    letter-spacing: 0.5px;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 26px;
  }
  .address {
    font-size: 26px;
    width: 400px;
    height: 120px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 40px;
    width: 100%;
    height: 40px;
    font-size: 16px;
    border-radius: 10px;
  }
  .iconList {
    margin-top: 60px;
    margin-bottom: 120px;
    padding-bottom: 60px;
    width: 100%;
    height: 140px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 28px;
    text-align: center;
    position: relative;
    top: 100px;
  }

  .iconPic {
    width: 100px;
    height: 100px;
    /* background: chartreuse; */
    border-radius: 50px;
    margin: 0 auto;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-cell {
    line-height: 100px;
    height: 100px;
    /* background: pink; */
    font-size: 30px;
    margin-top: 20px;
    padding-left: 60px;
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    height: 100px;
    font-size: 30px;
    line-height: 100px;
  }
  /deep/.van-button {
    width: 100%;
    height: 80px;
    font-size: 28px;
    margin-top: 100px;
  }
  /deep/.van-dialog {
    width: 600px;
    height: 400px;
  }
  .van-dialog__content--isolated {
    min-height: 164px;
  }
  /deep/.van-dialog__header {
    font-size: 34px !important;
    padding-top: 40px;
    font-weight: 800;
  }
  /deep/.van-dialog--round-button .van-dialog__message {
    font-size: 30px;
  }
  .bottom {
    font-size: 22px;
    /* margin-top: 150px;
    padding-bottom: 80px; */
    position: relative;
    bottom: -180px;
  }
  .bottom p {
    margin-bottom: 0;
  }
}
</style>
